import * as echarts from "echarts";
import "echarts-gl";
// import MAP_370000 from "./assets/maps/370000.json";
import EARTH_DATA from "./assets/maps/earth_data.json";

import HeaderPane from "./components/HeaderPane";
import CustomPane from "./components/CustomPane";

// if (!echarts.getMap("370000")) {
//   echarts.registerMap("370000", MAP_370000);
// }

const earthMeta = {
  x: 560,
  y: 157,
  z: 8,
  name: "地球",
  title: "",
  type: "chart", // chart,custom
  chartType: "earth", // normal,earth // componentType:'',
  option: function () {
    const data = EARTH_DATA.filter(function (dataItem) {
      return dataItem[2] > 0;
    }).map(function (dataItem) {
      return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
    });

    return {
      visualMap: {
        show: false,
        min: 0,
        max: 60,
        inRange: {
          symbolSize: [1.0, 10.0],
        },
      },
      globe: {
        show: false,
        // baseTexture: "/asset/get/s/data-1491837049070-rJZtl7Y6x.jpg",
        //heightTexture: "data-gl/asset/world.topo.bathy.200401.jpg",
        globeOuterRadius: 100,
        // shading: 'color',
        // displacementScale: 0.05,
        // displacementQuality: 'high',
        // realisticMaterial: {
        //     // 纹理贴图相关
        //     roughness: 0.7, // 材质的粗糙度  越粗糙反光度越低
        //     metalness: 0.5, // 金属质感 0为金属  1为非金属, 在这之间设置
        // },
        //environment: "/asset/get/s/data-1491837999815-H1_44Qtal.jpg",
        viewControl: {
          // autoRotate:true,
          // distance:150,
          // targetCoord: [123.38, 6.09]
        },

        light: {
          // main: {
          //     intensity: 5,
          //     shadow: false
          // },
          ambient: {
            intensity: 2,
          },
          // ambientCubemap: {
          //     texture: 'data-gl/asset/pisa.hdr',
          //     diffuseIntensity: 5
          // }
        },
      },
      series: [
        {
          type: "scatter3D",
          coordinateSystem: "globe",
          // blendMode: 'lighter',
          symbolSize: 1,
          silent: true,
          itemStyle: {
            color: "#0276f3",
            opacity: 1,
          },
          data: data,
        },
      ],
    };
  },
  transitionClass: "animate__zoomIn",
};

// const mapMeta = {
//   x: 480,
//   y: 227,
//   z: 8,
//   name: "地图",
//   title: "",
//   type: "chart", // chart,custom
//   chartType: "map", // normal,map // componentType:'',
//   option: function () {
//     const sourceData = [
//       {
//         name: "保健中心",
//         geoX: 119.95,
//         geoY: 36.06,
//         count: 114,
//         value: 3555.37,
//         zjValue: 2058.8,
//       },
//       {
//         name: "技术中心",
//         geoX: 120.86,
//         geoY: 36.36,
//         count: 1025,
//         value: 14620.94,
//         zjValue: 6576.78,
//       },
//       {
//         name: "济宁中心",
//         geoX: 116.59,
//         geoY: 35.38,
//         count: 53,
//         value: 1019.09,
//         zjValue: 467.33,
//       },
//       {
//         name: "莱州中心",
//         geoX: 119.95,
//         geoY: 37.22,
//         count: 119,
//         value: 981,
//         zjValue: 502.64,
//       },
//       {
//         name: "临沂中心",
//         geoX: 118.35,
//         geoY: 35.05,
//         count: 263,
//         value: 4190.35,
//         zjValue: 1870.21,
//       },
//       {
//         name: "龙口中心",
//         geoX: 120.33,
//         geoY: 37.64,
//         count: 182,
//         value: 1936.91,
//         zjValue: 855.99,
//       },
//       {
//         name: "蓬莱中心",
//         geoX: 120.8,
//         geoY: 37.82,
//         count: 105,
//         value: 861.44,
//         zjValue: 435.19,
//       },
//       {
//         name: "日照中心",
//         geoX: 119.46,
//         geoY: 35.42,
//         count: 352,
//         value: 4494.22,
//         zjValue: 2089.92,
//       },
//       {
//         name: "荣成中心",
//         geoX: 122.41,
//         geoY: 37.16,
//         count: 214,
//         value: 2434.92,
//         zjValue: 1224.79,
//       },
//       {
//         name: "威海中心",
//         geoX: 122.1,
//         geoY: 37.5,
//         count: 546,
//         value: 6769.81,
//         zjValue: 3121.2,
//       },
//       {
//         name: "烟台中心",
//         geoX: 121.41,
//         geoY: 37.55,
//         count: 690,
//         value: 8802.49,
//         zjValue: 4101.46,
//       },
//       {
//         name: "枣庄中心",
//         geoX: 117.57,
//         geoY: 34.86,
//         count: 83,
//         value: 1102.64,
//         zjValue: 567.63,
//       },
//     ];

//     const getInvalidRegions = () => {
//       var regions = ["济南市", "德州市", "聊城市", "滨州市", "泰安市", "莱芜市", "淄博市", "东营市", "潍坊市"];

//       return regions.map((region) => ({
//         name: region,
//         itemStyle: {
//           areaColor: "rgba(0,0,0,0)",
//           borderColor: "rgba(242,245,247,0.25)",
//         },
//         emphasis: {
//           itemStyle: {
//             areaColor: "rgba(0,0,0,0)",
//             borderColor: "rgba(242,245,247,0.25)",
//             borderWidth: 1,
//           },
//         },
//       }));
//     };

//     const invalidRegions = getInvalidRegions();

//     const scatterData = sourceData.map((source) => {
//       const dataItem = {
//         name: source.name,
//         value: [source.geoX, source.geoY, source.value],
//         source,
//         emphasis: {
//           label: {
//             position: "right",
//           },
//         },
//       };

//       if (dataItem.name === "威海中心") {
//         dataItem.emphasis.label.position = "top";
//       } else if (dataItem.name === "烟台中心") {
//         dataItem.emphasis.label.position = "top";
//       } else if (dataItem.name === "荣成中心") {
//         dataItem.emphasis.label.position = "bottom";
//       }

//       return dataItem;
//     });

//     return {
//       geo: {
//         show: true,
//         map: "370000",
//         roam: false,
//         top: 0,
//         bottom: 0,
//         tooltip: {
//           show: false,
//         },
//         itemStyle: {
//           borderColor: "rgba(147, 235, 248, 1)",
//           borderWidth: 1,
//           areaColor: {
//             type: "radial",
//             x: 0.5,
//             y: 0.5,
//             r: 0.8,
//             colorStops: [
//               {
//                 offset: 0,
//                 color: "rgba(147, 235, 248, 0)",
//               },
//               {
//                 offset: 1,
//                 color: "rgba(147, 235, 248, .2)",
//               },
//             ],
//             globalCoord: false,
//           },
//           shadowColor: "rgba(128, 217, 248, 1)",
//           shadowOffsetX: -2,
//           shadowOffsetY: 2,
//           shadowBlur: 10,
//         },
//         emphasis: {
//           label: {
//             show: false,
//           },
//           itemStyle: {
//             borderColor: "rgba(147, 235, 248, 1)",
//             borderWidth: 1,
//             areaColor: {
//               type: "radial",
//               x: 0.5,
//               y: 0.5,
//               r: 0.8,
//               colorStops: [
//                 {
//                   offset: 0,
//                   color: "rgba(147, 235, 248, 0)",
//                 },
//                 {
//                   offset: 1,
//                   color: "rgba(147, 235, 248, .2)",
//                 },
//               ],
//               globalCoord: false,
//             },
//             shadowColor: "rgba(128, 217, 248, 1)",
//             shadowOffsetX: -2,
//             shadowOffsetY: 2,
//             shadowBlur: 10,
//           },
//         },
//         regions: invalidRegions,
//       },
//       series: [
//         {
//           name: "地图",
//           type: "effectScatter",
//           coordinateSystem: "geo",
//           showEffectOn: "render",
//           rippleEffect: {
//             period: 15,
//             scale: 6,
//             brushType: "fill",
//           },
//           symbolSize: 12,
//           hoverAnimation: true,
//           data: scatterData,
//           itemStyle: {
//             normal: {
//               color: "rgba(255,235,59,0.7)",
//               showBlur: 10,
//               shadowColor: "#333",
//             },
//           },
//           label: {
//             show: true,
//             color: "#fff",
//             position: "right",
//             formatter: "{b}",
//             fontSize: 16,
//           },
//           emphasis: {
//             label: {
//               show: true,

//               position: "bottom",
//               formatter: function (params) {
//                 return `${params.data.source.name}：\r\n\r\n总价值：${params.data.source.value}\r\n总数量：${params.data.source.count}\r\n折算价值：${params.data.source.zjValue}`;
//               },
//               align: "left",
//               fontSize: 14,
//               lineHeight: 18,
//               borderColor: "rgba(75,116,255,0.8)",
//               backgroundColor: "rgba(0,23,11,0.3)",
//               color: "#fff",
//               borderWidth: 1,
//               borderRadius: 4,
//               padding: 5,
//             },
//           },
//           //zlevel: 2
//         },
//       ],
//     };
//   },
//   transitionClass: "animate__zoomIn",
// };

export const PaneMetas = [
  {
    x: 0,
    y: 0,
    z: 1,
    name: "标题",
    type: "custom",
    componentType: HeaderPane,
  },
  {
    x: 20,
    y: 100,
    z: 10,
    name: "设备价值总值",
    title: "设备价值总值",
    type: "custom",
    componentType: CustomPane,
    transitionClass: "animate__fadeInTopLeft",
  },
  earthMeta,
  {
    x: 20,
    y: 420,
    z: 10,
    name: "各单位价值",
    title: "各单位价值",
    type: "chart", // chart,custom
    chartType: "normal", // normal,map // componentType:'',
    option: function () {
      const sourceData = [
        {
          CUSTOMS_NAME: "技术中心",
          INSTRUMENT_NUM: 1025,
          ORIGINAL_VALUE: 14620.93634,
          INCREASE_RATE: 0.001094,
        },
        {
          CUSTOMS_NAME: "烟台中心",
          INSTRUMENT_NUM: 690,
          ORIGINAL_VALUE: 8802.487669,
          INCREASE_RATE: 0.067365,
        },
        {
          CUSTOMS_NAME: "威海中心",
          INSTRUMENT_NUM: 546,
          ORIGINAL_VALUE: 6769.805921,
          INCREASE_RATE: 0.124228,
        },
        {
          CUSTOMS_NAME: "日照中心",
          INSTRUMENT_NUM: 352,
          ORIGINAL_VALUE: 4494.219329,
          INCREASE_RATE: 2.320313,
        },
        {
          CUSTOMS_NAME: "临沂中心",
          INSTRUMENT_NUM: 263,
          ORIGINAL_VALUE: 4190.345354,
          INCREASE_RATE: 0.195687,
        },
        {
          CUSTOMS_NAME: "保健中心",
          INSTRUMENT_NUM: 114,
          ORIGINAL_VALUE: 3555.370315,
          INCREASE_RATE: 2.355591,
        },
        {
          CUSTOMS_NAME: "荣成中心",
          INSTRUMENT_NUM: 214,
          ORIGINAL_VALUE: 2434.917113,
          INCREASE_RATE: 0,
        },
        {
          CUSTOMS_NAME: "龙口中心",
          INSTRUMENT_NUM: 182,
          ORIGINAL_VALUE: 1936.907,
          INCREASE_RATE: 0,
        },
        {
          CUSTOMS_NAME: "枣庄中心",
          INSTRUMENT_NUM: 83,
          ORIGINAL_VALUE: 1102.63657,
          INCREASE_RATE: 0,
        },
        {
          CUSTOMS_NAME: "济宁中心",
          INSTRUMENT_NUM: 53,
          ORIGINAL_VALUE: 1019.09,
          INCREASE_RATE: 0,
        },
        {
          CUSTOMS_NAME: "莱州中心",
          INSTRUMENT_NUM: 119,
          ORIGINAL_VALUE: 981.000028,
          INCREASE_RATE: 0,
        },
        {
          CUSTOMS_NAME: "蓬莱中心",
          INSTRUMENT_NUM: 105,
          ORIGINAL_VALUE: 861.436775,
          INCREASE_RATE: 0,
        },
      ];

      const axisData = sourceData.map((o) => o.CUSTOMS_NAME);

      const option = {
        tooltip: {
          show: true,
          trigger: "axis",
        },
        legend: {
          data: ["设备价值（万元）", "资产增长率（%）"],
          textStyle: { color: "#fff" },
        },
        grid: {
          top: 27,
          bottom: 0,
          left: 5,
          right: 5,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            margin: 5,
            interval: 0,
            formatter(value) {
              if (!value) {
                return "";
              }
              return value.split("").join("\n");
            },
          },
          data: axisData,
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(202,207,210,0.3)",
              },
            },
            axisLine: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(202,207,210,0.3)",
              },
            },
            axisLine: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "设备价值（万元）",
            data: sourceData.map((o) => ({
              name: o.CUSTOMS_NAME,
              value: o.ORIGINAL_VALUE,
            })),
            type: "bar",
            itemStyle: {
              normal: {
                barBorderRadius: 1,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#c9a23b" },
                  { offset: 1, color: "#bd2aa9" },
                ]),
              },
            },
          },
          {
            name: "资产增长率（%）",
            data: sourceData.map((o) => ({
              name: o.CUSTOMS_NAME,
              value: o.INCREASE_RATE,
            })),
            type: "line",
            yAxisIndex: 1,
            smooth: true,
            symbolSize: 10,
            itemStyle: {
              color: "#c5468a",
            },
          },
        ],
      };

      return option;
    },
    transitionClass: "animate__fadeInLeft",
  },
  {
    x: 20,
    y: 740,
    z: 10,
    name: "总体价值分布",
    title: "总体价值分布",
    type: "chart", // chart,custom
    chartType: "normal", // normal,map // componentType:'',
    option: function () {
      const sourceData = [
        {
          name: "100万以上",
          value: 15708.13,
        },
        {
          name: "50万~100万",
          value: 9521.75,
        },
        {
          name: "10万~50万",
          value: 14845.72,
        },
        {
          name: "1万~10万",
          value: 5178.89,
        },
        {
          name: "1万以下",
          value: 592.92,
        },
        {
          name: "合计",
          value: 45847.42,
        },
      ];

      const data = sourceData.filter((o) => o.name !== "合计");

      return {
        color: [
          "#2ec7c9",
          "#b6a2de",
          "#5ab1ef",
          "#ffb980",
          "#d87a80",
          "#8d98b3",
          "#e5cf0d",
          "#97b552",
          "#95706d",
          "#dc69aa",
          "#07a2a4",
          "#9a7fd1",
          "#588dd5",
          "#f5994e",
          "#c05050",
          "#59678c",
          "#c9ab00",
          "#7eb00a",
          "#6f5553",
          "#c14089",
        ],
        tooltip: {
          show: true,
        },
        series: [
          {
            name: "总体价值分布",
            type: "pie",
            center: ["50%", "50%"],
            roseType: "area",
            minAngle: 15,
            itemStyle: {
              borderRadius: 2,
            },
            label: {
              color: "#fff",
              formatter: function (params) {
                return `${params.name}\n${params.percent}%`;
              },
            },
            labelLine: {
              length: 5,
              length2: 10,
              lineStyle: {
                color: "#dfe0e3",
                type: "dashed",
                cap: "round",
              },
            },
            data,
          },
        ],
      };
    },
    transitionClass: "animate__fadeInBottomLeft",
  },
  {
    x: 1434,
    y: 100,
    z: 10,
    name: "各单位设备使用指数",
    title: "各单位设备使用指数",
    type: "chart", // chart,custom
    chartType: "normal", // normal,map // componentType:'',
    option: function () {
      const sourceData = [
        {
          name: "技术中心",
          value: 39.01,
        },
        {
          name: "济宁中心",
          value: 1.17,
        },
        {
          name: "莱州中心",
          value: 0.08,
        },
        {
          name: "临沂中心",
          value: 0.8,
        },
        {
          name: "龙口中心",
          value: 5.34,
        },
        {
          name: "蓬莱中心",
          value: 0.12,
        },
        {
          name: "日照中心",
          value: 10.47,
        },
        {
          name: "荣成中心",
          value: 31.99,
        },
        {
          name: "威海中心",
          value: 2.67,
        },
        {
          name: "烟台中心",
          value: 9.35,
        },
        {
          name: "枣庄中心",
          value: 0.07,
        },
      ];

      const axisData = sourceData.map((o) => o.name);

      const option = {
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: "{b} : {c}",
        },

        grid: {
          top: 27,
          bottom: 0,
          left: 5,
          right: 5,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            margin: 5,
            interval: 0,
            formatter(value) {
              if (!value) {
                return "";
              }
              return value.split("").join("\n");
            },
          },
          data: axisData,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(202,207,210,0.3)",
            },
          },
          axisLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          // {
          //   name: '各单位价值',
          //   data: sourceData,
          //   type: "bar",
          //   itemStyle: {
          //     normal:{
          //       barBorderRadius: 1,
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         { offset: 0, color: "#c9a23b" },
          //         { offset: 1, color: "#bd2aa9" }
          //       ])
          //     }
          //   }
          // },
          {
            name: "各单位价值",
            data: sourceData,
            type: "line",
            smooth: true,
            symbolSize: 10,
            itemStyle: {
              color: "#0ff3fd",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#02A8D1" },
                { offset: 1, color: "#24669D" },
              ]),
            },
          },
        ],
      };

      return option;
    },
    transitionClass: "animate__fadeInTopRight",
  },
  {
    x: 1434,
    y: 420,
    z: 10,
    name: "专业大类参数维护",
    title: "专业大类参数维护",
    type: "chart", // chart,custom
    chartType: "normal", // normal,map // componentType:'',
    option: function () {
      const sourceData = [
        {
          CATEGORY_TYPE: "纺织",
          ORIGINAL_VALUE: 808.66,
        },
        {
          CATEGORY_TYPE: "植物检疫",
          ORIGINAL_VALUE: 1425.87,
        },
        {
          CATEGORY_TYPE: "临床检验",
          ORIGINAL_VALUE: 5392.35,
        },
        {
          CATEGORY_TYPE: "食品(化妆品)",
          ORIGINAL_VALUE: 28721.75,
        },
        {
          CATEGORY_TYPE: "轻工",
          ORIGINAL_VALUE: 2754.7,
        },
        {
          CATEGORY_TYPE: "卫生检疫",
          ORIGINAL_VALUE: 3675.6,
        },
        {
          CATEGORY_TYPE: "机电",
          ORIGINAL_VALUE: 2766.65,
        },
        {
          CATEGORY_TYPE: "动物检疫",
          ORIGINAL_VALUE: 1282.85,
        },
        {
          CATEGORY_TYPE: "化矿金危包",
          ORIGINAL_VALUE: 3940.72,
        },
      ];

      const data = sourceData.map((o) => ({
        name: o.CATEGORY_TYPE,
        value: o.ORIGINAL_VALUE,
      }));

      return {
        color: [
          "#2ec7c9",
          "#b6a2de",
          "#5ab1ef",
          "#ffb980",
          "#d87a80",
          "#8d98b3",
          "#e5cf0d",
          "#97b552",
          "#95706d",
          "#dc69aa",
          "#07a2a4",
          "#9a7fd1",
          "#588dd5",
          "#f5994e",
          "#c05050",
          "#59678c",
          "#c9ab00",
          "#7eb00a",
          "#6f5553",
          "#c14089",
        ],
        tooltip: {
          show: true,
        },
        series: [
          {
            name: "专业大类统计",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["30%", "60%"],
            //roseType: 'area',
            minAngle: 15,
            itemStyle: {
              borderRadius: 2,
            },
            label: {
              color: "#fff",
              formatter: function (params) {
                return `${params.name}\n${params.percent}%`;
              },
            },
            labelLine: {
              length: 10,
              length2: 15,
              lineStyle: {
                color: "#dfe0e3",
                type: "dashed",
                cap: "round",
              },
            },
            data,
          },
        ],
      };
    },
    transitionClass: "animate__fadeInRight",
  },
  {
    x: 1434,
    y: 740,
    z: 10,
    name: "服役年限价值分布",
    title: "服役年限价值分布",
    type: "chart", // chart,custom
    chartType: "normal", // normal,map // componentType:'',
    option: function () {
      const sourceData = [
        {
          name: "5年以下",
          value: 9365.16,
        },
        {
          name: "5至10年",
          value: 18660.94,
        },
        {
          name: "10至15年",
          value: 16255.63,
        },
        {
          name: "15至20年",
          value: 3596,
        },
        {
          name: "20年以上",
          value: 2891.42,
        },
        {
          name: "合计",
          value: 50769.15,
        },
      ];

      const data = sourceData.filter((o) => o.name !== "合计");

      return {
        color: [
          "#2ec7c9",
          "#b6a2de",
          "#5ab1ef",
          "#ffb980",
          "#d87a80",
          "#8d98b3",
          "#e5cf0d",
          "#97b552",
          "#95706d",
          "#dc69aa",
          "#07a2a4",
          "#9a7fd1",
          "#588dd5",
          "#f5994e",
          "#c05050",
          "#59678c",
          "#c9ab00",
          "#7eb00a",
          "#6f5553",
          "#c14089",
        ],
        tooltip: {
          show: true,
        },
        series: [
          {
            name: "服役年限价值分布",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["0%", "70%"],
            //roseType: 'area',
            minAngle: 15,
            itemStyle: {
              borderRadius: 2,
            },
            label: {
              color: "#fff",
              formatter: function (params) {
                return `${params.name}\n${params.percent}%`;
              },
            },
            labelLine: {
              length: 5,
              length2: 10,
              lineStyle: {
                color: "#dfe0e3",
                type: "dashed",
                cap: "round",
              },
            },
            data,
          },
        ],
      };
    },
    transitionClass: "animate__fadeInBottomRight",
  },
];
